<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script type="text/javascript">
        /*
        * 需求：当用户点击了效验按钮,要获取输入框中的内容,然后验证其是否合法<br/>
        * 验证的规则是：必须是由字母,数字，下划线组成,并且长度是5-12位
        * */
        function onclickFun(){
            //当我们操作一个标签的时候,一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //[object HTMLInputElement] 他就是dom对象
            var usernameText = usernameObj.value;
            //如何验证字符串,符合某个规则,需要使用正则表达式技术
            var patt = /^\w{5,12}$/;
            /*
            * test()方法用于测试某个字符串,是不是匹配对应的规则
            * 匹配的话就返回true , 不匹配的话就返回false
            * */

            //先获取span标签的对象
            var usernameSpanObj = document.getElementById("usernameSpan");

            if(patt.test(usernameText)){
                // usernameSpanObj.innerHTML = "用户名合法";
                usernameSpanObj.innerHTML = "<img src=\"right.png\" alt=\"\" style=\"width: 20px\">";
               // alert('用户名合法');
            }else{
                // alert("用户名不合法");
                // usernameSpanObj.innerHTML = "用户名不合法";
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" alt=\"\" style=\"width: 20px\">";
            }
        }
    </script>

</head>
<body>
<p id="text_show">
    Document对象中的方法介绍(重点)<br/>
    document.getElementById(elementId)<br/>
    通过标签的id属性查找标签的dom对象,elementId是标签的id属性值<br/>

    document.getElementsByName(elementName)<br/>
    通过标签的name属性查找标签的dom对象,elementName标签的name属性<br/>

    document.getElementsByTagName(tagName)<br/>
    通过标签名查找dom对象,tagName是标签名<br/>

    注:<br/>
    document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询<br/>
    如果没有id属性,则优先使用getElementsByName方法来进行查询<br/>
    如果id属性和name属性都没有的话,则按照标签名称进行查询getElementsByTagName<br/>
    以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象<br/>



</p>
<div class="look_source_code" onclick="getPageContent()">查看源码</div>
用户名:<input type="text" id="username" value="fzd" />
<span id="usernameSpan" style="color: red">

</span>
<button onclick="onclickFun()">效验</button>
</body>


</html>


